<template>
  <div>
    <!-- 搜索栏 -->
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      @input="handleSearch"
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
    <!-- 表格 -->
    <el-table :data="filteredTableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';

// 模拟表格数据
const tableData = ref([
  { name: '张三', age: 20, address: '北京市朝阳区' },
  { name: '李四', age: 25, address: '上海市浦东新区' },
  { name: '王五', age: 30, address: '广州市天河区' },
]);

// 搜索框输入内容
const searchQuery = ref('');

// 处理搜索逻辑
const filteredTableData = computed(() => {
  if (!searchQuery.value) {
    return tableData.value;
  }
  return tableData.value.filter(item => {
    return Object.values(item).some(value => {
      if (typeof value === 'string') {
        return value.includes(searchQuery.value);
      }
      return false;
    });
  });
});

// 搜索事件处理函数
const handleSearch = () => {
  // 这里可以添加额外的搜索逻辑，比如发送请求到后端
};
</script>